import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Platform,
  ListView,
  RefreshControl,
  InteractionManager,
} from 'react-native';
import PxToDp from '../../utils/PxToDp';
import SaleChanceItem from '../../containers/SaleItemContainner';
import Loading from '../Public/Loading';
import LoadMoreFooter from './LoadMoreFooter';
import { fetchSaleList } from '../../actions/SaleListActions';
import EmptyDataPage from '../Public/EmptyDataPage';
import { fetchFilter } from '../../actions/SaleChanceFilterAction';

let saleIsLoading = true;
let saleLoadMore = false;
let pageIndex = 1;
const pageSize = 10;
let saleList = [];

class SaleChance extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    this.state = {
      dataSource: ds,
    };
  }
  // refreshScreen() {
  //   this.setState({ lastRefresh: Date(Date.now()).toString() });
  // }
  onRefresh() {
    pageIndex = 1;
    saleIsLoading = true;
    saleLoadMore = false;
    saleList = [];
    const { dispatch } = this.props;
    const saleFilterObj = {};
    dispatch(fetchFilter(saleFilterObj));
    dispatch(fetchSaleList(pageIndex, saleIsLoading, saleLoadMore, 1, 0, 0, 0, 0));
  }

  onEndReached() {
    // ListView滚动到底部，根据是否正在加载更多 是否正在刷新 是否已加载全部来判断是否执行加载更多
    if (saleList.length >= this.props.saleListCount || this.props.saleIsLoading) {
      saleLoadMore = false;
      return;
    }
    saleLoadMore = true;
    InteractionManager.runAfterInteractions(() => {
      this.loadMoreData();
    });
  }
  loadMoreData() {
    const { dispatch } = this.props;
    pageIndex = Number.parseInt(saleList.length / pageSize, 10) + 1;
    saleIsLoading = false;
    dispatch(fetchSaleList(pageIndex, saleIsLoading, saleLoadMore, 1, 0, 0, 0, 0));
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(fetchSaleList(pageIndex, saleIsLoading, saleLoadMore, 1, 0, 0, 0, 0));
  }
  render() {
    saleList = this.props.saleChanceData;
    return (
      <View style={[style.wrapper, style.flex]}>
        {
        this.props.saleIsLoading ?
          <Loading /> :
            saleList && saleList.length > 0
          ?
            <ListView
              dataSource={this.state.dataSource.cloneWithRows(saleList)}
              enableEmptySections
              onEndReachedThreshold={10}
              renderRow={rowData => (<SaleChanceItem
                navigator={this.props.screenProps}
                saleData={rowData}
              />)
             }

              onEndReached={() => this.onEndReached()}
              refreshControl={
                <RefreshControl
                  refreshing={this.props.saleIsLoading}
                  onRefresh={() => this.onRefresh()}
                  tintColor="gray"
                  colors={[style.white, style.white, style.white]}
                  progressBackgroundColor="gray"
                />
             }
              renderFooter={() => {
                if (saleList.length < 1 ||
                  this.props.saleIsLoading) {
                  return null;
                }
                const isLoadAll = saleList.length < this.props.saleListCount;
                return (<LoadMoreFooter
                  navigator={this.props.navigation}
                  isLoadAll={isLoadAll}
                />);
              }
            }
            />
          :
            <EmptyDataPage />
        }
      </View>
    );
  }
}

const style = StyleSheet.create({
  wrapper: {
    marginTop: Platform.OS === 'ios' ? PxToDp(3) : 0,
    backgroundColor: '#F5F5F5',
  },
  flex: {
    flex: 1,
  },
  white: {
    color: '#FFFFFF',
  },
});

export default SaleChance;
